Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[김병화] Week6 #261

Open
wants to merge 29 commits into
base: part2-김병화
Choose a base branch
from

Conversation

KimByeongHwa
Copy link

요구사항

기본

  • 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어 주세요. (week 1 ~ 3 요구사항 참고)
  • 카드 컴포넌트를 클릭하면 해당하는 링크로 새로운 창을 띄워서 이동하게 해주세요.
  • 카드 컴포넌트에서 createdAt 데이터 기준으로 현재 Date와 차이에 따라 아래와 같은 규칙으로 설정해 주세요.
  • 프로필 영역의 데이터는 https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sample/user”를 활용해 주세요.
  • 프로필 데이터가 없는 경우 “로그인” 버튼이 보이게 해주세요.
  • 폴더 소유자, 폴더 이름 영역, 링크들에 대한 데이터는 “/api/sample/folder”를 활용해 주세요.
(여기서 폴더란 링크들의 정보가 저장되어 있는 객체를 의미합니다. shared 페이지는 외부 유저에게 자신의 폴더 데이터 하나를 공유할 때 유저가 보게되는 화면 입니다.
디자인 시안에서 “프로필 이미지”는 폴더 소유자의 프로필, “@코드잇”은 폴더 소유자 이름, “⭐️ 즐겨찾기”는 폴더 이름이에요.)

// 반응형 미구현

  • Tablet에서 카드 리스트가 화면의 너비 1124px를 기준으로 이상일 때는 3열로 작을 때는 2열로 배치해 주세요.
  • Tablet, Mobile에서 검색바, 카드 리스트의 좌우 최소 여백은 32px로 설정해 주세요.

@KimByeongHwa KimByeongHwa added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Nov 26, 2023
const userName = user?.name;
const userEmail = user?.email;
const userProfileImg = user?.profileImageSource;

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const {name = "", email = "", profileImageSource = ""} = user;

function Card({ link }: CardProps) {
const getCreatedTime = () => {
const splitedCreatedAt = link.createdAt.split('-');

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아래 58~63번 라인까지의 코드는 앞으로 쓸일이 많아보이네요. /src/utils로 빼서 사용해주시면 됩니다. getFormatedDate()

return createdTime;
};

const getCreatedBefore = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 친구도 /src/utils로 빼주시면 될 것 같습니다.

let createdBeforeMessage = '';

const splitedCreatedAt = link.createdAt.split('T');

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const [year, month, day] = splitedCreatedAt[0].split('-').map(val => Number(val));
const [hour, minute, second] = splitedCreatedAt[1].split(':').map((val, index) => index === 2 ? Number(val.substring(0,2)) : Number(val) );

const createdDate = new Date(year, month, day, hour, minute, second);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants